<template>
  <section>
    <img :src="topImg" class="top_img">
    <div class="basic_info">
      <div class="basic_part" style="border-bottom: 1px solid #f2f2f2">
        <span>姓名</span>
        <span>{{name}}</span>
      </div>
      <div class="basic_part" style="border-bottom: 1px solid #f2f2f2">
        <span>银行卡号</span>
        <span>{{bankid}}</span>
      </div>
      <div class="basic_part">
        <span>身份证号</span>
        <span>{{codeid}}</span>
      </div>
    </div>
    <div class="result_info">
      <div class="basic_part">
        <span style="flex: none;">验证结果</span>
        <span :class="{y_match:yMatch,n_match:nMatch}">{{result}}</span>
      </div>
    </div>

  </section>
</template>

<script>
  export default {
    name:'bankThreeResult',
    data(){
      return{
        result:'',
        topImg:require('../../assets/api/result_success.png'),
        yMatch:true,
        nMatch:false,
        name:'',
        codeid:'',
        bankid:'',
      }
    },
    created(){
      const that = this;
      this.$ajax.post(window.g.apiUrl+'/user/isLog.do')
        .then((response)=>{
          if(response.data.code != 200){
            this.$dialog.notify({
              mes: '登录失效，正在跳转至登录页面',
              timeout: 1500,
              callback:()=>{
                that.$router.push('/login');
              }
            });
          }
        }).catch(()=>{
      })
      let TO_OBJECT = JSON.parse(sessionStorage.getItem('TO_OBJECT'));
      this.name = TO_OBJECT.name;
      this.codeid = TO_OBJECT.codeid;
      this.bankid = TO_OBJECT.bankid;
      if(TO_OBJECT.key == '0000'){
        this.result = '验证一致';
      }else{
        if(TO_OBJECT.key == undefined){
          this.result = TO_OBJECT.message;
        }else{
          this.result = '验证不一致';
        }
        this.yMatch = false;
        this.nMatch = true;
        this.topImg = require('../../assets/api/result_error.png')
      }
    }
  }
</script>

<style scoped>
  .top_img{
    width: 100%;
    height: 4.2rem;
    display: block;
  }
  .basic_info{
    box-shadow: 2px 2px 10px rgba(128,128,128,.2);
    width: 100%;
    padding: 0 .4rem;
  }
  .basic_part{
    display: flex;
    padding: .21rem 0;
    align-items: center;
  }
  .basic_part span:nth-child(1){
    width: 2rem;
    text-align: left;
  }
  .result_info{
    width: 100%;
    margin-top: .4rem;
    box-shadow: 2px 2px 3px 1px rgba(128,128,128,.2);
    padding: 0 .4rem;
  }
  .y_match{
    color: #06D85F;
  }
  .n_match{
    color: red;
    flex: 1;
    text-align: left;
  }


</style>
